<template>
  <view class="">
    <template v-if="list.length > 0">
      <view class="box main" v-for="(item, index) in list" :key="index" @click="goPage(`/pages/myPage/MyBusinessCard/MyBusinessCard?cardId=${item.id}&pageType=my`)">
        <view class="left">
          <image :src="item.avatar" class="headImage" mode="scaleToFill" />
          <view class="nameBox">
            <view class="name">
              <text>{{ item.name }}</text>
              <image v-if="item.level === '1'" src="../static/home/hg.png" mode="scaleToFill" />
              <view v-if="item.authFlag === '1'" class="authLabel"><image src="../../static/home/yrz.png" mode="scaleToFill" />已认证</view>
            </view>
            <view class="zw">{{ item.job }} {{ item.company }}</view>
          </view>
        </view>
        <u-icon name="arrow-right" color="#efefef"></u-icon>
      </view>
    </template>
    <view v-else style="width: 100%; display: flex; justify-content: center; margin-top: 15rpx">
      <u-empty mode="list"></u-empty>
    </view>
    <view class="buttomBox" v-if="list.length === 0">
      <u-button color="#1676fc" shape="circle" @click="submit">创建名片</u-button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { myCardList } from "@/api/my";
import { goPage } from "@/utils/commonFn";
import { onMounted, ref } from "vue";
// @ts-ignore
import { onShow } from "@dcloudio/uni-app";
import { useBCardStore } from "@/stores/bCard";
const list = ref<myTypes.myCardList>([]);
onShow(async () => {
  const res = await myCardList();
  list.value = res.data;
});
const submit = () => {
  //@ts-ignore
  useBCardStore().setEditCardInfo("");
  useBCardStore().clearEditEduWorkInfo();
  goPage("/pages/myPage/MyBusinessCard/createBusinessCard");
};
</script>

<style scoped lang="less">
.main {
  margin-top: 20rpx;
}
.box {
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32rpx;
  .left {
    display: flex;
    .headImage {
      width: 88rpx;
      height: 88rpx;
      background: salmon;
      margin-right: 24rpx;
      border-radius: 50%;
    }
    .nameBox {
      .name {
        display: flex;
        align-items: center;
        text {
          font-size: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          color: #1e1e1e;
          line-height: 44rpx;
        }
        & > image {
          width: 28rpx;
          height: 28rpx;
          margin-left: 10rpx;
        }
      }
      .zw {
        font-size: 24rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        color: #bebebe;
        line-height: 46rpx;
        margin-top: 8rpx;
      }
    }
  }
}
</style>
